<template>
  <div class="seckill">
				<div class="count">
					<div class="countdown-title">京东秒杀</div>
					<div class="countdown-desc">
						<strong>{{now}}:00</strong>
						点场 距结束
					</div>
					<div class="timer">
						<span class="hour">{{h}}</span>
						<span class="minute">{{m}}</span>
						<span class="second">{{s}}</span>
					</div>
				</div>
				<div class="seckill_item" v-for="(item,index) in seckillData" :key="index">
					<ul class="arrange">
						<li>
							<img :src="item.url" alt="">
						</li>
						<li class="seckill_title">
							{{item.title}}
						</li>
						<li class="seckill_price">
							{{item.price}}
						</li>
					</ul>
					
				</div>
			</div>
</template>

<script>
export default {
	name:'CountDown',
    data() {
        return {
            seckillData:[
				{title:'企鹅机动队（50只企鹅神奇的探险故事，传导自由快乐，保持好奇心，平装全11册桥梁书）（爱心树童书）',
				url:require('../common/img/seckill-item1.jpg'),price:'￥269.00'},
				{title:'伊利 植选植物奶高蛋白豆奶PET315ml*10瓶/箱 0添加蔗糖0反式脂肪酸 高蛋白饮料饮品 学生营养早餐伴侣礼盒装',
				url:require('../common/img/seckill-item2.jpg'),price:'￥53.85'},
				{title:'爱国者（aigo）128GB USB3.1 高速读写U盘 U310 Pro 金属U盘 读速150MB/s 一体封装 防尘防水',
				url:require('../common/img/seckill-item3.jpg'),price:'￥79.80'},
				{title:'冠能猫粮成猫7kg 鸡肉味挑嘴美毛全价猫粮 益肾配方',
				url:require('../common/img/seckill-item4.jpg'),price:'￥189.00'},
				{title:'蒙牛 真果粒牛奶饮品（草莓+芦荟+椰果+桃果粒）250g*24   四种口味缤纷礼盒装（新老包装随机发货）',
				url:require('../common/img/seckill-item5.jpg'),price:'￥59.90'}
			],
            now:0,
			h:0,
			m:0,
			s:0,
			leftTime:0,
        }
    },
    mounted() {
        this.timer();
    },
    methods: {
        countDown(){
		var time = new Date();
		var hours = time.getHours();
		var minute = time.getMinutes();
		var second = time.getSeconds();
		if (hours%2 !== 0) {
			hours = hours-1;
			var endTime = time - (minute*60+second)*1000 + 3600000;
		}else{
			var endTime = time - (minute*60+second)*1000 + 7200000;
		}
		this.leftTime = (endTime - time)/1000;
		this.now = hours;
		this.h = parseInt(this.leftTime/(60*60)%24);
		this.m = parseInt(this.leftTime/60%60);
		this.s = parseInt(this.leftTime%60);

		this.h = this.h>9 ? this.h : '0' + this.h;
		this.m = this.m>9 ? this.m : '0' + this.m;
		this.s = this.s>9 ? this.s : '0' + this.s;
	  },
	  timer(){
		  setInterval(() => {
			  this.leftTime -= 1
			  this.countDown()
		  }, 1000);
	  }
    },

}
</script>

<style scoped>
    /* 秒杀专区 */
	.seckill{
		width: 1190px;
		height: 260px;
		margin: 0 auto;
	}
	.seckill div{
		float: left;
	}
	.seckill_item{
		width: 200px;
		height: 260px;
		background-color: #fff;
	}
	.count{
		width: 190px;
		height: 260px;
		color: #fff;
		text-align: center;
		background-image: url("../common/img/seckill.png");
	}
	.countdown-title{
		width: 190px;
		font-size: 30px;
		font-weight: 700;
		margin-top: 31px;
	}
	.countdown-desc{
		width: 190px;
		margin-top: 90px;
		font-size: 14px;
	}
	strong{
		font-size: 18px;
		padding-right: 2px;
		vertical-align: middle;
		display: inline-block;
		margin-top: -1px;
	}
	.timer{
		width: 130px;
		height: 30px;
		margin: 10px 30px;
	}
	.timer span{
		position: relative;
		float: left;
		width: 30px;
		height: 30px;
		text-align: center;
		background-color: #2f3430;
		color: white;
		font-size: 20px;
		font-weight: 700;
	}
	.hour,.minute{
		margin-right: 20px;
	}
	.hour::after {
		content: ":";
		display: block;
		position: absolute;
		right: -20px;
		font-weight: bolder;
		font-size: 18px;
		width: 20px;
		height: 100%;
		top: 0;
	}
	.minute::after {
		content: ":";
		display: block;
		position: absolute;
		right: -20px;
		font-weight: bolder;
		font-size: 18px;
		width: 20px;
		height: 100%;
		top: 0;
	}
	.arrange{
		list-style: none;
		width: 160px;
		height: 240px;
		font-size: 12px;
		color: #333;
		padding: 0;
		margin: 10px auto;
	}
	.arrange li{
		width: 160px;
		text-align: center;
		margin: 20px 0;
	}
	.seckill_title{
		display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
	}
	.seckill_price{
		color: #e1251b;
		font-weight: 700;
	}
</style>